<template>
  <div class="vue-box">
    <div class="c-panel">
        <el-row>
          <el-col :span="24" :xs="24">
            <!--模糊查询-->
            <el-form :inline="true" size="small">
              <el-form-item label="执行状态：">
                <el-select size="small" v-model="query.status" placeholder="请选择" clearable>
                  <el-option label="正常" value='正常'></el-option>
                  <el-option label="异常" value="异常"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="创建时间：">
                <el-date-picker size="small" v-model="query.queryTime" type="datetimerange" range-separator="至" 
                start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" plain size="small" icon="el-icon-search" @click="f5()">查询</el-button>
              </el-form-item>
            </el-form>
            <!--全局功能按钮-->
            <el-row :span="24">
              <el-col :span="1.5" class="firstBtn">
                <el-button type="info" plain size="small" icon="el-icon-refresh" @click="query.pageNo = 1; f5('')">重置</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button type="warning" plain size="small" icon="el-icon-download" @click="exportExcel()">导出</el-button>
              </el-col>
            </el-row>
            <el-table :data="tableData"  v-loading="state.loading" size="medium">
              <el-table-column label="编号" type="index" width="60" align="center"></el-table-column>
              <el-table-column label="bean名称"  prop="beanName" width="180" align="center"></el-table-column>
              <el-table-column label="参数"   prop="params" width="180"  align="center"></el-table-column>
              <el-table-column label="状态"   prop="status" width="100" align="center">
                <template slot-scope="scope">
                    <el-tag
                    :type="scope.row.status === '1' ? 'primary' : 'danger'"
                    disable-transitions>{{sa.getDictByidAndlabel('1620055019875209218', scope.row.status)}}</el-tag>
                  </template>
              </el-table-column>
              <el-table-column label="异常信息" prop="exception" align="center">
                <template slot-scope="scope">
                    <div v-if="scope.row.status==='1'">
                      未出现异常
                    </div>
                    <div v-else>
                      {{scope.row.exception}}
                    </div>
                  </template>
              </el-table-column>
              <el-table-column label="执行耗时"  prop="times" width="120" align="center"></el-table-column>
              <el-table-column label="创建时间" width="180"  prop="createTime"  align="center"></el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="page-box">
              <el-pagination background
                layout="total, prev, pager, next, sizes, jumper" 
                :current-page.sync="query.pageNo" 
                :page-size.sync="query.pageSize" 
                :total="dataCount" 
                :page-sizes="[1, 5, 10, 20, 30, 100]" 
                @current-change="f5()" 
                @size-change="f5()">
              </el-pagination>
            </div>
          </el-col>
        </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      tableData:[],
      dataCount:0,
      query:{
        pageNo:1,
        pageSize:10,
        jobId:'',
        status:'',
        queryTime: [],
      },
      state:{
        loading:false
      }
    }
  },
  methods:{
    f5(param){
      this.state.loading=true
      let params=this.query;
      if(params.queryTime!=undefined){
        let sTime=params.queryTime[0]
        params.startTime=this.sa.forDate(sTime,"yyyy-MM-dd HH:mm")
        let eTime=params.queryTime[1]
        params.endTime=this.sa.forDate(eTime,"yyyy-MM-dd HH:mm")
      }
      console.log(params);
      this.request('/api/schedule/logList',params).then(res=>{
        if(!res){return}
        this.tableData=res.data.records
        this.dataCount=res.data.total
        if(param==''){
          let queryObj={pageNo:1,pageSize:10,jobId:this.query.jobId}
          this.query=queryObj
        }
        this.state.loading=false
      })
    },
    //导出excel
    exportExcel(){
      if(!this.zm.checkAuth("scheduleLog:export")){
        this.$message.error("您暂无<导出定时任务日志信息>权限")
        return
      }
      let params={id:this.jobId}
      this.request('/api/schedule/logExport?id='+this.query.jobId).then(res=>{
        if(!res){return}
        const file = new Blob([res.data], { type: "application/vnd.ms-excel" });
        const url = URL.createObjectURL(file);
        const a = document.createElement("a");
        a.href = url;
        a.click();
        this.isClick = true;
        this.$message.success("导出成功")
      })
    }

  },
  created(){
    this.$bus.$on("setJobID",(id)=>{
      this.query.jobId=id
    })
  },
  mounted(){
    this.$bus.$emit("goLog")
    this.f5('')
  }
}
</script>

<style scoped>
/**模糊查询字体样式 */
/deep/.c-panel .el-form-item__label, .c-panel .c-label {
	font-size:14px;
	font-weight:900;
}
/*表格样式 */
/deep/ .el-table {
  margin-left:10px;
}
/deep/ .el-table th.el-table__cell {
  background-color: aliceblue;
}
/*模糊搜索表单右移5px，对齐全局按钮和数据table*/
/deep/.c-panel .el-form{
	margin-left:-5px
}
/*按钮与表格的对齐间距等等 */
.firstBtn{
  padding-left:10px;
  padding-right:5px;
  margin-bottom: 5px;
}
.btn{
  padding-right:5px;
  margin-bottom: 5px;
}
/*分页左移10px */
.page-box{
	margin-left: 10px;
}
</style>